<template>
  <div class="notice-list">
    <p class="title">通知列表</p>
    <div class="tab">
      <div
        class="tab-item"
        :class="{ active: item.active }"
        v-for="item in nav"
        :key="item.code"
        @click="navTab(item)"
      >
        <p class="tab-item__title">{{ item.name }}</p>
        <p class="tab-item__text">{{ item.num }}</p>
      </div>
      <p class="read-btn">全部标为已读</p>
    </div>
    <div class="list">
      <div
        class="list-item"
        v-for="item in list"
        :key="item.id"
        @click="$router.push(`/notice/detail?id=${item.id}`)"
      >
        <p class="text">{{ item.text }}</p>
        <p class="date">{{ item.date }} {{ item.time }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getNoticeList, getNoticeNum, setMsgAll } from '@/api/common'

  export default defineComponent({
    name: 'Markcomponent',
    components: {},
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        list: [] as any,
        nav: [] as any,
        activeKey: 0,
      })

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        getTotal()
        getNoticeData({})
      })
      // 已读未读消息
      const getTotal = async () => {
        const res = await getNoticeNum({})
        state.nav = res.list
        state.nav.map((v, i) => {
          v.active = false
          if (i === 0) {
            v.active = true
          }
        })
      }
      // 切换tab
      const navTab = (step) => {
        console.log(step)
        state.nav.map((v) => (v.code === step.code ? (v.active = true) : (v.active = false)))
      }

      const getNoticeData = async (type) => {
        const res = await getNoticeList({ type: type })
        state.list = res.list
      }

      // 全部标为已读
      const readAllMsg = async () => {
        await setMsgAll()
        getTotal()
      }

      return {
        ...toRefs(state),
        tableRef,
        navTab,
      }
    },
  })
</script>
<style lang="less" scoped>
  .notice-list {
    padding: 24px 32px;
    min-width: 1000px;

    .title {
      font-size: 18px;
      color: #333;
      padding-bottom: 32px;
      font-weight: bold;
    }

    .list {
      .list-item {
        display: flex;
        height: 52px;
        align-items: center;
        color: #666;
        border-bottom: 1px solid #eee;
        cursor: pointer;

        .text {
          width: 450px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .date {
          color: #999;
          margin-left: auto;
        }
      }
    }
  }
</style>
